<template>
	<view class="staffinfoBox">
		<view class="top">
			<view class="left">
				<view class="name">
					{{infoMsg.purpose}}
				</view>
				<view class="list">
					<text>职位:{{infoMsg.position}}</text>
					<text>所属门店:{{infoMsg.company_name}}</text>
					<text>服务宗旨:</text>
				</view>
			</view>
			<view class="right">
				<image :src="host+infoMsg.portrait" mode="aspectFill" v-if="infoMsg.portrait"></image>
			</view>
		</view>
		<view class="bottom">
			<view class="item">
				<view class="title">
					从业经历
				</view>
				<view class="worklist">
					<view class="shopname">
						<text class="iconfontPT iconziyuan3"></text>
						{{infoMsg.company_name}}
					</view>
					<view class="time">
						{{infoMsg.s_serving}} 至 {{infoMsg.e_serving}}
					</view>
					<view class="position">
						{{infoMsg.last_post}}
					</view>
				</view>
				<view class="title">
					个人照片
				</view>
				<view class="imgbox">
					<view class="img" v-if="infoMsg.image.length > 0" v-for="(item,index) in infoMsg.image" :key="index">
						<image  :src="host+item" mode="aspectFill"></image>
					</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {staff_desc} from "../../apis/shop/api.js"
	export default{
		data(){
			return{
				id:"",
				infoMsg:{portrait:''},
			}
		},
		onLoad(option) {
			this.getInfo(option.store_id,option.id)
		},
		computed:{
			host(){
				return this.$baseHost.car
			}
		},
		methods:{
			 
			getInfo(store_id,id){
				let that = this
				staff_desc({
					store_id:store_id,
					id:id
				}).then(res=>{
					that.infoMsg = res.data;
					that.infoMsg.image = that.infoMsg.image.split(',');
					// console.log(that.infoMsg.image);
				})
			}
		}
	}
</script>

<style lang="less">
	.top{
		width: 100%;
		height: 320rpx;
		background-color: #E41805;
		color: #fff;
		.left{
			float: left;
			width: calc(~"100% - 200rpx");
			box-sizing: border-box;
			padding: 40rpx 0 0 30rpx;
			.name{
				font-size: 48rpx;
				font-weight: bold;
			}
			.list{
				text{
					display: block;
					margin-top: 20rpx;
					font-size: 24rpx;
				}
			}
		}
		.right{
			float: right;
			width: 200rpx;
			image{
				width: 168rpx;
				height: 168rpx;
				border-radius: 168rpx;
				margin-top: 50rpx;
			}
		}
	}
	.bottom{
		.title{
			font-size: 30rpx;
			color: #333;
			font-weight: bold;
			margin-top: 40rpx;
		}
		.item{
			box-sizing: border-box;
			width: 100%;
			padding: 30rpx;
			.shopname{
				font-size: 28rpx;
				color: #333333;
				margin-top: 20rpx;
				text{
					color: #333;
					margin-right: 8rpx;
				}
			}
			.time{
				font-size: 24rpx;
				color: #999999;
				margin-top: 15rpx;
			}
			.position{
				font-size: 24rpx;
				color: #333;
				margin-top: 16rpx;
			}
			.imgbox{
				margin-top: 40rpx;
				&::after{
					content: "";
					display: block;
					height: 0;
					overflow: hidden;
					clear: both;
				}
				display: flex;
				.img{
					flex: 1;
					min-width: 30%;
					margin-left: 15rpx;
					image{
						width: 100%;
						height: 300rpx;
					}
						
				}
			}
		}
	}
</style>
